<!--
  - Copyright (c) 2018-2019.
  -  This file is part of the moonpie production
  -  (c) johnzhang <875010341@qq.com>
  -  This source file is subject to the MIT license that is bundled
  -  with this source code in the file LICENSE.
  -->

<template>
    <div class="tag-user-list">
        <!-- 列表操作区 -->
        <div class="tag-user-operation am-margin-bottom-sm">
            <div class="am-btn-group">
                <button class="am-btn am-btn-default am-margin-left-sm">同步选中用户</button>
                <button class="am-btn am-btn-success" v-on:click="syncAllFans">通过所有用户</button>
            </div>
        </div>
        <!-- 列表区 -->
        <div class="tag-user-items">
            <table class="tag-user-items__list am-table tpl-table-black am-table-striped">
                <thead>
                <th><input type="checkbox" class="am-checkbox-inline" />全选</th>
                <th>用户ID</th><th>昵称</th><th>头像</th>
                <th>是否关注</th><th>性别</th>
                </thead>
                <tbody>
                <tr v-for="user in initConfig.users" v-if="initConfig.users.length > 0">
                    <td><input type="checkbox" class="am-checkbox-inline am-checked" /></td>
                    <td class="am-text-middle">{{user.wxuser_id}}</td>
                    <td class="am-text-middle">{{user.nickname}}</td>
                    <td class="am-text-middle"><img width="46" height="46" v-bind:src="user.avatar" v-bind:alt="user.nickname" class="am-img-thumbnail"/></td>
                    <td class="am-text-middle" v-if="user.subscribe">关注于：{{user.subscribe_at|fromUnixTimestamp}}</td> <td class="am-text-middle" v-else>--</td>
                    <td class="am-text-middle">{{user.sex}}</td>
                </tr>
                <tr v-else><td colspan="4" class="am-text-middle">暂无数据</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
  import Moment from 'moment'

  export default {
    name: "TagUserList",
    props: ['initConfig'],
    filters: {
      fromUnixTimestamp(timestamp, format = 'YYYY-MM-DD HH:mm') {
        return Moment.unix(timestamp).format(format)
      }
    },
    methods: {
      syncAllFans() {
        const layer_id = layer.load(2)
        const $defer = $.post(this.initConfig.urlConfig.syncAllFansUrl)
        $defer.fail(err => {
          layer.close(layer_id)
        })
        $defer.done(ret => {
          layer.close(layer_id)
          if (ret.code == 1) {
            layer.msg(ret.msg || '数据处理成功')
          } else {
            layer.msg(ret.msg || '数据处理失败', {icon: 5})
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>